<template lang="html">
  <div class="TanOTABox2">
    <p>{{productName}}</p>
    <p class="gray">上架时间 {{startSoldTime}}</p>
    <div class="listBox" v-for="(item,index) in skuList">
      <el-row class="head">
        <el-col :span="12">
          <span>规格：{{item.name}}</span>
        </el-col>
        <el-col :span="3" :offset="6">
          <span>价格：{{item.price}}</span>
        </el-col>
        <el-col :span="3">
          <span>库存：{{item.quantity}}</span>
        </el-col>
      </el-row>
      <el-row style="padding:10px 10px;">
        <el-col :span="6" class="select">
          <el-select v-model="item.value" size="mini" @change="clear(index)"  placeholder="请选择">
             <el-option
               v-for="item in options"
               :label="item"
               :value="item">
             </el-option>
          </el-select>
        </el-col>
        <el-col :span="4" class="text-left" style="padding-left:10px; position:relative;">
          <span class="green" @click="onShow(index)" style="cursor:pointer;">+添加特殊条件</span>
          <!--日历-->
          <div v-if="show==index" class="calendar">
            <p class="green">+添加特殊条件</p>
            <el-row>
              <el-col :span="15" style="border-right:1px solid #ddd;">
                <el-row>
                  <el-col :span="2">
                    <span class="btn" @click="prev(currentYear,currentMonth)"><</span>
                  </el-col>
                  <el-col :span="20" style="text-align:center;">
                    <span>{{ currentYear }}年{{currentMonth}}月</span>
                  </el-col>
                  <el-col :span="2">
                    <span class="btn" @click="next(currentYear,currentMonth)">></span>
                  </el-col>
                </el-row>
                <div class="week">
                  <span>一</span>
                  <span>二</span>
                  <span>三</span>
                  <span>四</span>
                  <span>五</span>
                  <span>六</span>
                  <span>日</span>
                </div>
                <div class="day">
                  <ul>
                    <li v-for="dayobject in days">
                     <!--本月-->
                     <!--如果不是本月  改变类名加灰色-->
                     <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">
                       {{ dayobject.day.getDate() }}
                     </span>
                     <!--如果是本月  还需要判断是不是这一天-->
                     <span v-else>
                     <!--今天  同年同月同日-->
                       <!-- <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
                       @click="pick(dayobject.day)" :class="activeDay==dayobject.day.getDate()?'clicked active':'active'">
                         {{ dayobject.day.getDate() }}
                       </span> -->
                       <span v-if="item.aDate>dayobject.day.getTime()||item.bDate+9*60*60*1000<dayobject.day.getTime()" class="gray">{{ dayobject.day.getDate() }}</span>

                       <span v-else @click="pick(dayobject.day)"  :class="activeDay.year==dayobject.day.getFullYear()&&(activeDay.month-1)==dayobject.day.getMonth()&&activeDay.day==dayobject.day.getDate()?'clicked':''">
                         {{ dayobject.day.getDate() }}
                       </span>
                     </span>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="8" class="right">
                <el-row v-if="skuList[index].value==options[0]||skuList[index].value==options[1]||skuList[index].value==options[2]">
                  <el-col :span="10"><span>当天：</span></el-col>
                  <el-col :span="14">
                    <el-input size="mini" v-model="value1"></el-input>
                  </el-col>
                </el-row>
                <div v-if="skuList[index].value==options[3]">
                  <el-row style="margin-bottom:5px;">
                    <el-col :span="10"><span>上午场：</span></el-col>
                    <el-col :span="14">
                      <el-input size="mini" v-model="value1"></el-input>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom:5px;">
                    <el-col :span="10"><span>下午场：</span></el-col>
                    <el-col :span="14">
                      <el-input size="mini" v-model="value2"></el-input>
                    </el-col>
                  </el-row>
                </div>
                <div v-if="skuList[index].value==options[4]">
                  <el-row style="margin-bottom:5px;">
                    <el-col :span="10"><span>上午场：</span></el-col>
                    <el-col :span="14">
                      <el-input size="mini" v-model="value1"></el-input>
                    </el-col>
                  </el-row>
                  <el-row style="margin-bottom:5px;">
                    <el-col :span="10"><span>下午场：</span></el-col>
                    <el-col :span="14">
                      <el-input size="mini" v-model="value2"></el-input>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="10"><span>晚间场：</span></el-col>
                    <el-col :span="14">
                      <el-input size="mini" v-model="value3"></el-input>
                    </el-col>
                  </el-row>
                </div>

              </el-col>
            </el-row>
            <div class="sub">
              <el-button type="success" size="small" @click="close">取消</el-button>
              <el-button type="success" size="small" @click="addSpecial(index,item.value)">保存</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="skuList[index].value==options[0]" style="padding:0px 10px 10px 10px; border-bottom:1px dashed #eee;">
        <el-col :span="2">
          <span>每天：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-20px;">
          <el-input v-model="skuList[index].setNumb1" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>
      <el-row v-if="skuList[index].value==options[1]" style="padding:0px 10px 10px 10px; border-bottom:1px dashed #eee;">
        <el-col :span="3">
          <span>周日到周四：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-20px;">
          <el-input v-model="skuList[index].setNumb1" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <span>周五到周六：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-20px;">
          <el-input v-model="skuList[index].setNumb2" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>
      <el-row v-if="skuList[index].value==options[2]" style="padding:0px 10px 10px 10px; border-bottom:1px dashed #eee;">
        <el-col :span="3">
          <span>周一到周五：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-20px;" >
          <el-input v-model="skuList[index].setNumb1" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <span>周六到周日：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-20px;">
          <el-input v-model="skuList[index].setNumb2" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>
      <el-row v-if="skuList[index].value==options[3]" style="padding:0px 10px 10px 10px; border-bottom:1px dashed #eee;">
        <el-col :span="2">
          <span>上午场：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-10px;">
          <el-input v-model="skuList[index].setNumb1" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span>下午场：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-10px;">
          <el-input v-model="skuList[index].setNumb2" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>
      <el-row v-if="skuList[index].value==options[4]" style="padding:0px 10px 10px 10px; border-bottom:1px dashed #eee;">
        <el-col :span="2">
          <span>上午场：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-10px;">
          <el-input v-model="skuList[index].setNumb1" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span>下午场：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-10px;">
          <el-input v-model="skuList[index].setNumb2" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span>晚间场：</span>
        </el-col>
        <el-col :span="3" style="margin-left:-10px;">
          <el-input v-model="skuList[index].setNumb3" size="mini" placeholder="请输入内容"></el-input>
        </el-col>
      </el-row>
      <el-row style="padding:10px;">
        <div class="skuList" v-for="(list,index2) in item.special">
          <span style="display:inline-block; text-align:right;" :class="item.compile==index2?'oncompile':'compile'" @click="changeType(index,index2)">
            {{list.date1}} {{list.week}}
            <span v-if="list.value==options[0]||list.value==options[1]||list.value==options[2]" class="red">{{list.add1}}<img v-if="item.compile==index2" @click="deletList(index,index2)" class="icon" src="../../../static/img/icon2/ic_delet.png" width="16" height="16"></span>
            <span v-if="list.value==options[3]" class="red">上午场：{{list.add1}}<img v-if="item.compile==index2" @click="deletList(index,index2)" class="icon" src="../../../static/img/icon2/ic_delet.png" width="16" height="16"> <br/><span class="lin">下午场：{{list.add2}}</span></span>
            <span v-if="list.value==options[4]" class="red">上午场：{{list.add1}}<img v-if="item.compile==index2" @click="deletList(index,index2)" class="icon" src="../../../static/img/icon2/ic_delet.png" width="16" height="16"> <br/><span class="lin">下午场：{{list.add2}}</span><br/><span class="lin">晚间场：{{list.add3}}</span></span>
          </span>
        </div>
      </el-row>
    </div>
    <el-row class="text-right">
      <el-button type="success" size="small" @click="sub">保存</el-button>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var url;

export default {
  data(){
    return {
      skuList:[],
      productName:'',
      startSoldTime:'',
      loading:false,
      show:-1,
      value1:'',  //弹出框输入框1
      value2:'',  //弹出框输入框2
      value3:'',  //弹出框输入框3
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      compile:-1,
      activeDay:{
        day:0,
        month:0,
        year:0,
        week:''
      },
      days:[],
      options:['按天','按周间/末(周五、六)','按周间/末(周六、日)','按上/下场次','按上/下/晚场次'],
      list:[{date:'2017-07-24',week:'周六',content:'20'},
            {date:'2017-07-23',week:'周六',content:'30'},
            {date:'2017-07-25',week:'周六',content:'40'}],
      listType:1,    //1为新增，2为修改
      listIndex:0
    }
  },
  methods:{
    sub:function (){
      this.loading=true;
      var arr=[],that=this;
      for(let i in this.skuList){
        var json={}
        json.productId=this.$store.state.TanProduct.id;
        json.skuId=that.skuList[i].id;
        json.startTime=that.skuList[i].aDate;
        json.endTime=that.skuList[i].bDate;
        json.productType=4;
        //状态
        if(this.skuList[i].value==this.options[0]){
          json.type=1;
          json.commCount=[{'title':1,'count':that.skuList[i].setNumb1}];
        }else if(this.skuList[i].value==this.options[1]){
          json.type=2;
          json.commCount=[];
          for(let k=1;k<8;k++){
            if(k<5||k==7){
              var a={
                title:k,
                count:that.skuList[i].setNumb1
              }
            }else{
              var a={
                title:k,
                count:that.skuList[i].setNumb2
              }
            }
            json.commCount.push(a);
          }
        }else if(this.skuList[i].value==this.options[2]){
          json.type=2;
          json.commCount=[];
          for(let k=1;k<8;k++){
            if(k<6){
              var a={
                title:k,
                count:that.skuList[i].setNumb1
              }
            }else{
              var a={
                title:k,
                count:that.skuList[i].setNumb2
              }
            }
            json.commCount.push(a);
          }
        }else if(this.skuList[i].value==this.options[3]||this.skuList[i].value==this.options[4]){
          json.type=3;
          if(this.skuList[i].value==this.options[3]){
            json.commCount=[{'title':'上午场','count':that.skuList[i].setNumb1},
                            {'title':'下午场','count':that.skuList[i].setNumb2}]
          }else if(this.skuList[i].value==this.options[4]){
            json.commCount=[{'title':'上午场','count':that.skuList[i].setNumb1},
                            {'title':'下午场','count':that.skuList[i].setNumb2},
                            {'title':'晚间场','count':that.skuList[i].setNumb3}]
          }
        }

        //添加特殊
        if(this.skuList[i].special.length>0){
          json.ext=[];
          for(let k in this.skuList[i].special){
            var jsonExt={};
            if(this.skuList[i].special[k].value==this.options[0]||this.skuList[i].special[k].value==this.options[1]||this.skuList[i].special[k].value==this.options[2]){
              var date=that.skuList[i].special[k].date1.replace(/-/g,'/');
              jsonExt.startTime=Date.parse(new Date(date));
              jsonExt.endTime=Date.parse(new Date(date));
              jsonExt.count=that.skuList[i].special[k].add1;
              jsonExt.title='';
              json.ext.push(jsonExt);
            }else if(this.skuList[i].special[k].value==this.options[3]){
              var date=that.skuList[i].special[k].date1.replace(/-/g,'/');
              jsonExt.startTime=Date.parse(new Date(date));
              jsonExt.endTime=Date.parse(new Date(date));
              jsonExt.count=that.skuList[i].special[k].add1;
              jsonExt.title='上午场';
              json.ext.push(jsonExt);
              var jsonExt2={};
              jsonExt2.startTime=Date.parse(new Date(date));
              jsonExt2.endTime=Date.parse(new Date(date));
              jsonExt2.count=that.skuList[i].special[k].add2;
              jsonExt2.title='下午场';
              json.ext.push(jsonExt2);
            }else if(this.skuList[i].special[k].value==this.options[4]){
              var date=that.skuList[i].special[k].date1.replace(/-/g,'/');
              jsonExt.startTime=Date.parse(new Date(date));
              jsonExt.endTime=Date.parse(new Date(date));
              jsonExt.count=that.skuList[i].special[k].add1;
              jsonExt.title='上午场';
              json.ext.push(jsonExt);
              var jsonExt2={};
              jsonExt2.startTime=Date.parse(new Date(date));
              jsonExt2.endTime=Date.parse(new Date(date));
              jsonExt2.count=that.skuList[i].special[k].add2;
              jsonExt2.title='下午场';
              json.ext.push(jsonExt2);
              var jsonExt3={};
              jsonExt3.startTime=Date.parse(new Date(date));
              jsonExt3.endTime=Date.parse(new Date(date));
              jsonExt3.count=that.skuList[i].special[k].add3;
              jsonExt3.title='晚间场';
              json.ext.push(jsonExt3);
            }
            console.log(json.ext);
          }
        }else{
          json.ext=[];
        }
        arr.push(json);
      }
      console.log(arr);
      axios.get(url+'/v1/orders/reservation/scenicArea',{
        params:{
          'reservations':JSON.stringify(arr)
        }
      }).then((res)=>{
        this.loading=false;
        this.$message({
          showClose: true,
          message: '成功',
          type: 'success'
        });
        this.$store.dispatch('closeDialog','TanProduct');
        console.log(res.data);
      }).catch((err)=>{
        this.loading=false;
        this.$message({
          showClose: true,
          message: '错误：'+err,
          type: 'error'
        });
      })
    },
    clear:function (n){
      this.skuList[n].special=[];
    },
    onShow:function (n){
      this.listType=1;
      this.initTime();
      this.show=n;
    },
    deletList:function (n,k){
      this.skuList[n].special.splice(k,1);
    },
    close:function (){
      this.show=-1;
    },
    addSpecial:function (n,val){
      if(this.activeDay.year==0){
        this.$message.error('请选择日期');
        return;
      }else{
        if(val==this.options[0]){
          var json={};
          json.value=val;
          json.date1=this.activeDay.year+'-'+this.activeDay.month+'-'+this.activeDay.day;
          json.week=this.activeDay.week;
          json.add1=this.value1;
          this.skuList[n].special.push(json);
        }else if(val==this.options[1]){
          var json={};
          json.value=val;
          json.date1=this.activeDay.year+'-'+this.activeDay.month+'-'+this.activeDay.day;
          json.week=this.activeDay.week;
          json.add1=this.value1;
          json.add2=this.value2;
          this.skuList[n].special.push(json);
        }else if(val==this.options[2]){
          var json={};
          json.value=val;
          json.date1=this.activeDay.year+'-'+this.activeDay.month+'-'+this.activeDay.day;
          json.week=this.activeDay.week;
          json.add1=this.value1;
          json.add2=this.value2;
          this.skuList[n].special.push(json);
        }else if(val==this.options[3]){
          var json={};
          json.value=val;
          json.date1=this.activeDay.year+'-'+this.activeDay.month+'-'+this.activeDay.day;
          json.week=this.activeDay.week;
          json.add1=this.value1;
          json.add2=this.value2;
          this.skuList[n].special.push(json);
        }else if(val==this.options[4]){
          var json={};
          json.value=val;
          json.date1=this.activeDay.year+'-'+this.activeDay.month+'-'+this.activeDay.day;
          json.week=this.activeDay.week;
          json.add1=this.value1;
          json.add2=this.value2;
          json.add3=this.value3;
          this.skuList[n].special.push(json);
        }
        this.value1='';
        this.value2='';
        this.value3='';
        this.show=-1;
      }
    },
    changeType:function (n,k){
      this.skuList[n].compile=k;
    },
    //日历初始化
    initData: function(cur) {
      var leftcount=0; //存放剩余数量
      var date;
      if (cur) {
          date = new Date(cur);
      } else {
          var now=new Date();
          var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
          d.setDate(35);
          date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
      }
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;

      this.currentWeek = date.getDay(); // 1...6,0
      if (this.currentWeek == 0) {
          this.currentWeek = 7;
      }
      var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
          var d = new Date(str);
          d.setDate(d.getDate() - i);
          var dayobject={}; //用一个对象包装Date对象  以便为以后预定功能添加属性
          dayobject.day=d;
          this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      for (var i = 1; i <= 36 - this.currentWeek; i++) {
          var d = new Date(str);
          d.setDate(d.getDate() + i);
          var dayobject={};
          dayobject.day=d;
          this.days.push(dayobject);
      }
    },
    initTime:function (){
      this.activeDay.day=0;
      this.activeDay.month=0;
      this.activeDay.year=0;
      this.activeDay.week=0;
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year,month,day){
         var y = year;
         var m = month;
         if(m<10) m = "0" + m;
         var d = day;
         if(d<10) d = "0" + d;
         return y+"-"+m+"-"+d
     },
      prev: function(year, month) {
         // setDate(0); 上月最后一天
         // setDate(-1); 上月倒数第二天
         // setDate(dx) 参数dx为 上月最后一天的前后dx天
         console.log(year , month , 1);
         var d = new Date(this.formatDate(year , month , 1));
         d.setDate(0);
         this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
      },
      next: function(year, month) {
          var d = new Date(this.formatDate(year , month , 1));
          d.setDate(35);
          this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
      },
      pickYear: function(year, month) {

      },
      pick: function(date) {
        console.log(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
        this.activeDay.day=date.getDate();
        this.activeDay.month=date.getMonth()+1;
        this.activeDay.year=date.getFullYear();
        var week =date.getDay(),str;
        if (week== 0) {
                str = "周日";
        } else if (week == 1) {
                str = "周一";
        } else if (week == 2) {
                str = "周二";
        } else if (week == 3) {
                str = "周三";
        } else if (week == 4) {
                str = "周四";
        } else if (week == 5) {
                str = "周五";
        } else if (week == 6) {
                str = "周六";
        }
        this.activeDay.week=str;
      },
      getMessage:function (){
        axios.get(url+'/v1/product/get/sku',{
          params:{
            productId:this.$store.state.TanProduct.id
          }
        }).then((res)=>{
          var data=res.data.data.skuList;
          for(let i in data){
            data[i].value=this.options[0];
            data[i].setNumb1=0;
            data[i].setNumb2=0;
            data[i].setNumb3=0;
            data[i].special=[];
            //有效期转换
            if(data[i].periodDate.indexOf("-")!=-1){
              var dateArr = data[i].periodDate.split('-');
              //开始日期
              var month1 = parseInt(dateArr[0].split('月')[0]);
              var day1 = parseInt(dateArr[0].split('月')[1].replace('日',''));
              var year1=new Date().getFullYear();
              var ymd1=year1+"/"+month1+"/"+day1;
              data[i].aDate=Date.parse(new Date(ymd1));
              //结束日期
              var month2 = parseInt(dateArr[1].split('月')[0]);
              var day2 = parseInt(dateArr[1].split('月')[1].replace('日',''));
              var year2=new Date().getFullYear();
              var ymd2=year2+"/"+month2+"/"+day2;
              data[i].bDate=Date.parse(new Date(ymd2));
            }else{
              if(data[i].periodDate.indexOf("-")!=-1){
                var month1 = parseInt(data[i].periodDate.split('月')[0]);
                var day1 = parseInt(data[i].periodDate.split('月')[1].replace('日',''));
                var year1=new Date().getFullYear();
                var ymd1=year1+"/"+month1+"/"+day1;
                data[i].aDate=Date.parse(new Date(ymd1));
                data[i].bDate=Date.parse(new Date(ymd1));
              }
            }
            data[i].compile=-1;
          }
          this.productName=res.data.data.productName;
          this.startSoldTime=res.data.data.startSoldTime;
          this.skuList=data;
        }).catch((err)=>{
          console.log(err);
        })
      }
  },
  computed:{
    getId(){
      return this.$store.state.TanProduct.id;
    }
  },
  watch:{
    getId(val){
      this.getMessage();
    }
  },
  created(){
    url = this.$store.state.url;
    this.initData(null);
    this.getMessage();
  }
}
</script>

<style lang="Sass">
.TanOTABox2{
  .el-checkbox__label{font-size: 12px;}
}
</style>
<style lang="Sass" scoped>
.TanOTABox2{ text-align: left;
  p{font-size: 12px; color: #333333;}
}
.listBox{width: 100%; position: relative;
  .head{background: #F7F8FC; padding: 5px 10px;}
  span{font-size: 12px; line-height: 22px;}
  .skuList{float: left; margin-right: 20px;
    .icon{vertical-align: top; margin-top: 3px; margin-left: 5px; cursor: pointer;}
  }
  .compile{cursor: default;
    .lin{margin-right: 3px;}
  }
  .oncompile{background: #EFF7F3; padding: 5px 10px; border-radius: 5px; border:1px solid #38CA7C;
    .lin{ margin-right: 25px;}
  }



  .calendar{padding: 5px; border:1px solid #95989A; position: absolute; top: 0px; right: -440px; width: 450px; height: 250px; background: #fff; z-index: 9;
    span{font-size: 12px;}
    .btn{cursor: pointer;}
    .week{display: flex; text-align: center;
      span{display: inline-block; flex: 1;}
    }
    .day{display: flex; text-align: center;
      span{display: inline-block; flex: 1;}
      ul{list-style: none;
        li{float: left; width: 14%;
          span{color: #000; cursor: pointer; vertical-align: top;}
          .other-month{color: #ccc;}
          .active{color: red;}
          .clicked{background: #38CA7C; color: #fff; transform: scale(1.5,1.5);}
        }
      }
    }
    .right{padding-left:10px; box-sizing:border-box;}
    .sub{position: absolute; right: 10px; bottom: 10px;}
  }
}

</style>
